<template>
	<view>
		<un-navbar titleText="技师" :isBack="false" />
		<view class="head_box">
			<view class="flex align_center ma30">
				<view class="tips_box ma_right20 bo_radius18" :class="current == 0 ? 'ztbgcolor te_white' : 'bg_white'">全部</view>
				<view class="tips_box ma_right20 bo_radius18" :class="current == 1 ? 'ztbgcolor te_white' : 'bg_white'">附近</view>
				<view class="tips_box ma_right20 bo_radius18" :class="current == 2 ? 'ztbgcolor te_white' : 'bg_white'">年龄</view>
				<view class="tips_box ma_right20 bo_radius18" :class="current == 3 ? 'ztbgcolor te_white' : 'bg_white'">好评</view>
			</view>
			<view class="search_box ma30 pa_lr20 flex align_center bo_radius18">
				<input class="flex1 f_s28" placeholder="搜索技师" />
			</view>
		</view>
		<view class="zhanwei"></view>
		<view class="ma30 bg_white bo_radius18 pa30 flex" @click="goinfo">
			<view class="flex flex_column justify_center align_center">
				<image class="head_img bo_radius50" mode="aspectFill" src="https://img2.baidu.com/it/u=571942794,458358566&fm=253&fmt=auto&app=138&f=JPEG?w=538&h=434"></image>
				<view class="flex justify_center align_center pa_top20" >
					<view class="f_s24 leabl_box bg_blue te_white te_center">16:00</view>
					<view class="f_s24 leabl_box bg_white te_blue te_center">可约</view>
				</view>
			</view>
			<view class="flex1 pa_left30">
				<view class="flex align_center justify_between pa_top10">
					<view class="flex align_center">
						<view class="f_s30 name ellipsis">你好哇豪豪</view>
						<view class="iconfont i-shoucangmendian pa_lr10 te_yellow"></view>
						<view class="te_black9">5.0</view>
					</view>
					<view class="te_black9">0.7km</view>
				</view>
				<view class="flex align_center justify_between pa_tb20">
					<view>28  177  37</view>
					<view>经验3年</view>
				</view>
				<view class="flex">
					<image class="img_box bo_radius18 ma_right20" mode="aspectFill" src="https://img2.baidu.com/it/u=571942794,458358566&fm=253&fmt=auto&app=138&f=JPEG?w=538&h=434"></image>
					<image class="img_box bo_radius18 ma_right20" mode="aspectFill" src="https://img2.baidu.com/it/u=571942794,458358566&fm=253&fmt=auto&app=138&f=JPEG?w=538&h=434"></image>
					<image class="img_box bo_radius18 ma_right20" mode="aspectFill" src="https://img2.baidu.com/it/u=571942794,458358566&fm=253&fmt=auto&app=138&f=JPEG?w=538&h=434"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { showToast } from '@/utils/utils'
	import { ref, reactive } from 'vue'
	
	const current = ref(0)

	const goinfo = () => {
		uni.navigateTo({
			url: '/subPackages/home/technician/info'
		})
	}
</script>

<style scoped lang="scss">
	$ztcolor: #5FB72D;

	.zttecolor {
		color: $ztcolor;
	}

	.ztbgcolor {
		background-color: $ztcolor;
	}

	.head_box{
		position: fixed;
		background: #f7f7f7;
		z-index: 99;
	}
	.tips_box{
		height: 56upx;
		line-height: 56upx;
		padding: 0 16upx;
	}
	.search_box{
		width: 690upx;
		border: 1px solid #EAEAEA;
		height: 80upx;
	}
	.zhanwei{
		height: 196upx;
	}
	.head_img{
		width: 160upx;
		height: 160upx;
	}
	.leabl_box{
		width: 80upx;
		height: 50upx;
		line-height: 54upx;
		border-radius: 20px 0 0 20px;
	}
	.name{
		max-width: 240upx;
	}
	.img_box{
		width: 80upx;
		height: 80upx;
	}
</style>